<template>
  <div class="text-black">
    <PageLayout>
      <template #left>
        <div class="left-bar bg-white">
          <LeftSize>
            <template #leftTop>
              <div class="flex align-center justify-between">
                <div class="text-dark text-lg text-bold">模板列表</div>
                <div
                  ><el-button link type="primary" @click="handleShowAddDialog">新建</el-button></div
                >
              </div>
            </template>
            <template #leftList>
              <templateLeftList
                :treeList="treeList"
                :activeId="activeItem.id"
                @rename="handleRename"
                @move="handleMove"
                @delete="handleDelete"
                @clickItem="handleClickItem"
              ></templateLeftList>
            </template>
          </LeftSize>
        </div>
      </template>

      <template #rightEdit>
        <div class="main-iframe">
          <IframePage
            :formId="activeItem.formId"
            viewModel="editor"
            bizModule="NursingHandbook"
            v-if="activeItem.formId"
          ></IframePage>
          <div v-else class="empty-info"><span class="left-tips-max">请创建或选择模板</span></div>
        </div>
      </template>
    </PageLayout>
    <AddDialog
      ref="createDialog"
      :options="addOption"
      @confirm="handleConfirm"
      @close="handleClose"
    ></AddDialog>
    <updateDialog
      :options="dialogOptions"
      @confirm="handleConfirm"
      @close="handleClose"
    ></updateDialog>
    <moveDialog :options="moveOptions" @confirm="handleConfirm" @close="handleClose"></moveDialog>
  </div>
</template>
<script setup>
  import { computed, onBeforeMount, onMounted, ref, reactive, defineAsyncComponent } from 'vue';
  import PageLayout from '@/components/PageLayout/index.vue';
  import LeftSize from '@/components/PageLayout/Side/Left/index.vue';

  import templateLeftList from '@/components/PageLayout/Side/Left/templateList.vue';

  // import AddDialog from './components/addDialog.vue';
  // import updateDialog from './components/updateDialog.vue';
  // import moveDialog from './components/moveDialog.vue';
  import { useSubMenu } from '@/hooks/useSubMenu/index';
  import {
    deleteHandbookTemplate as deleteData,
    postHandbookTemplatePage as queryList,
  } from '@/api/handbookTemplate/index';
  import { useStore } from 'vuex';
  import { useHandleData } from '@/hooks/useHandleData/index';
  import { useBookList } from '@/hooks/useBookList/index';
  // import IframePage from '@/components/IframePage/iframe.vue';
  const AddDialog = defineAsyncComponent(() => import('./components/addDialog.vue'));
  const updateDialog = defineAsyncComponent(() => import('./components/updateDialog.vue'));
  const moveDialog = defineAsyncComponent(() => import('./components/moveDialog.vue'));

  const IframePage = defineAsyncComponent(() => import('@/components/IframePage/iframe.vue'));

  const store = useStore();
  const addRoutes = computed(() => store.state.permission.addRoutes);

  const searchName = ref('');
  const handleMoreFilter = (item) => {};
  const handleFilterOwner = () => {
    console.log('handleFilterOwner');
  };
  const handleRename = (item) => {
    console.log('handleRename', item);

    handleUpdate('重命名', item);
  };
  const handleMove = (item) => {
    console.log('handleMove', item);

    handleMoveUpdate('移动到', item);
  };
  const addOption = ref({
    width: 500,
    title: '新建',
    visible: false,
    editStatus: false,
    defaultValue: {},
    cate: [],
  });
  const moveOptions = reactive({
    title: '移动到',
    visible: false,
    editStatus: false,
    defaultValue: {},
    width: 500,
    cate: [],
  });
  let dialogOptions = reactive({
    title: '',
    visible: false,
    defaultValue: {},
    width: 500,
    cate: [],
  });
  const handleShowAddDialog = () => {
    addOption.value.visible = true;
    addOption.value.title = '新建';
    addOption.value.cate = formTypeList.value;
    addOption.value.defaultValue = {};
  };

  function handleConfirm() {
    dialogOptions.visible = false;
    addOption.value.visible = false;
    queryData();
  }

  function handleClose() {
    dialogOptions.visible = false;
    dialogOptions.defaultValue = {};
    moveOptions.visible = false;
    moveOptions.defaultValue = {};
    addOption.value.visible = false;
  }

  function handleUpdate(title, row) {
    dialogOptions.title = title;
    dialogOptions.visible = true;
    dialogOptions.editStatus = true;
    dialogOptions.defaultValue = JSON.parse(JSON.stringify(row));
    dialogOptions.cate = formTypeList.value;
  }
  function handleMoveUpdate(title, row) {
    moveOptions.title = title;
    moveOptions.visible = true;
    moveOptions.editStatus = true;
    moveOptions.defaultValue = JSON.parse(JSON.stringify(row));
    moveOptions.cate = formTypeList.value;
  }
  // 删除数据
  async function handleDelete(row) {
    await useHandleData(deleteData, { id: row.id }, `确认删除${row.templateName}`);
    queryData();
  }

  const activeItem = ref({});
  function handleClickItem(item) {
    console.log('handleClickItem', item);
    activeItem.value = item;
  }

  const formTypeList = ref([]);
  const { queryData, treeList } = useBookList({ queryList, formTypeList });
  onMounted(async () => {
    const { getSubMenu, subMenu } = useSubMenu();
    await getSubMenu();
    const bookCates = addRoutes.value?.find((item) => item.name === 'Book');
    formTypeList.value = bookCates?.children?.map((item) => {
      return {
        label: item?.meta?.title,
        value: item.id,
      };
    });
    await queryData();
  });
</script>
<style lang="scss" scoped>
  .main-iframe {
    // min-width: 600px;
    margin: 10px auto;
    box-sizing: border-box;

    display: block;
    background-color: #fff;
    height: 96%;
    overflow: scroll;
    width: 90%;
    height: calc(100vh - 80px);
  }
</style>
